import React, { useEffect, useState } from 'react'
import { InfiniteScroll, List} from 'antd-mobile'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';


function UseList() {
  const navigate=useNavigate();
  const [list,setList]=useState([]);
  const [page,setPage]=useState(1);
    const getList=async()=>{
        const res=await axios.get('/chun/cooperation/wap/health_news/',{
            params:{
                from_wx_mini:1,
                page:page,
                partner:'chunyu_wap_mini',
                release_time:'2020-04-22%2010%3A30%3A00',
                channel_id:21
            }
        })
        console.log(res.data.content_list)
        setList(list.concat(res.data.content_list))
        setPage(page+1)
    }
    useEffect(()=>{
        getList()
    },[])
  return (
    <div>
      <List>
        {
          list.map((v,i)=>{
            return <dl key={i} style={{display:"flex"}} onClick={()=>navigate('/details',{state:v})}>
              <dd>
                <img src={v.img} alt="" />
              </dd>
              <dt>{v.title}</dt>
            </dl>
          })
        }
      </List>
      <InfiniteScroll hasMore={true} loadMore={getList}></InfiniteScroll>
    </div>
  )
}

export default UseList
